import { computed } from 'vue';
import { useRouter } from 'vue-router';

import { $t } from '@vben/locales';

export const tablecolumns = computed(() => [
  {
    title: $t('customer.list.name'),
    field: 'nickname',
    treeNode: true,
    Width: 120,
  },
  // {
  //   title: $t('customer.list.phone'),
  //   field: 'phone',
  //   minWidth: 120,
  // },
  // {
  //   title: $t('customer.list.email'),
  //   field: 'email',
  //   minWidth: 120,
  // },
  {
    title: $t('customer.list.bind'),
    field: 'username',
    minWidth: 120,
    slots: {
      default: ({ row }: { row: any }) => {
        const router = useRouter();
        const handleClick = () => {
          router.push('/customerbind');
        };
        return (
          <div>
            {row.username || (
              <span
                onClick={handleClick}
                style={{ color: '#1890ff', cursor: 'pointer' }}
              >
                去绑定
              </span>
            )}
          </div>
        );
      },
    },
  },

  {
    title: $t('customer.list.remark'),
    field: 'remark',
  },
  // 创建时间
  {
    title: $t('customer.list.createTime'),
    field: 'createdAt',
    formatter: ['formatDate', 'yyyy-MM-dd'],
  },
  {
    title: $t('sys.menu.operation'),
    minWidth: 200,
    slots: { default: 'action' },
  },
]);
export const formColumns = computed(() => [
  {
    component: 'Input',
    fieldName: 'nickname',
    label: $t('customer.list.name'),
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'username',
    label: $t('customer.list.bind'),
    disabled: true,
    componentProps: {
      placeholder: ' ',
    },
  },
  // {
  //   component: 'Input',
  //   componentProps: {
  //     clearable: true,
  //   },
  //   fieldName: 'phone',
  //   label: $t('customer.list.phone'),
  //   rules: 'required',
  // },
  // {
  //   component: 'Input',
  //   // 对应组件的参数
  //   fieldName: 'email',
  //   label: $t('customer.list.email'),
  //   rules: 'required',
  // },
  // {
  //   component: 'RadioGroup',
  //   defaultValue: '1',
  //   componentProps: {
  //     isButton: true,
  //     options: [
  //       {
  //         label: $t('sys.role.start'),
  //         value: '1',
  //       },
  //       {
  //         label: $t('sys.role.stop'),
  //         value: '0',
  //       },
  //     ],
  //   },
  //   fieldName: 'status',
  //   label: $t('sys.role.status'),
  // },
  {
    component: 'Input',
    fieldName: 'remark',
    componentProps: {
      type: 'textarea',
      rows: 4,
      maxlength: 200,
      showWordLimit: true,
    },
    label: $t('sys.role.remark'),
  },
]) as any;
